<template>
    <div class="partner">
        <div class="container">
            <div class="headTitle">
                <div class="inner">
                    <h6>cooperation</h6>
                    <h1>科研合作</h1>
                </div>
            </div>
            <div class="flex-grow">
                <div class="flex-item">
                    <div class="nkd">
                        <div class="img"></div>
                        <p>南科大电子电气工程联合实验室</p>
                    </div>
                </div>
                <div class="flex-item">
                    <div class="hgd">
                        <div class="img"></div>
                        <p>哈工大机器人实训基地</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<style lang="less" scoped>
.partner{
    background:#000;
    height:600px;
    padding-bottom:20px;
    .flex-item{
        margin-top:50px;
        p{
            text-align: center;
            margin-top: 40px;
            margin-bottom:20px;
            color:#fff;
        }
        .nkd{
            cursor: pointer;
            .img{
                width:200px;
                height:192px;
                background: url(../images/partner-nkd.png) no-repeat 0 0;
                background-size:100% 100%;
                margin:0 auto;
                transition: all 1s;
            }
            &:hover{
                .img{
                    width:256px;
                    height:246px;
                    background: url(../images/partner-nkd-hover.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
                p{
                    font-size:16px;
                    color:#F47306;
                }
            }
        }
        .hgd{
            cursor: pointer;
            .img{
                width:220px;
                height:192px;
                background: url(../images/partner-hgd.png) no-repeat 0 0;
                background-size:100% 100%;
                margin:0 auto;
                transition: all 1s;
            }
            &:hover{
                .img{
                    width:282px;
                    height:246px;
                    background: url(../images/partner-hgd-hover.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
                p{
                    font-size:16px;
                    color:#1078A5;
                }
            }
        }
    }
}
</style>
